<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <style type="text/css">
        .layui-table {
            border: #000000 1px solid;
          
        }
        td{
            border: #000000 1px solid;
        }
    </style>
    <body>
        <form id="merchantProduct">
            <table class="layui-table">
                <colgroup>
                    <col width="150">
                    <col width="200">
                    <col>
                </colgroup>
                <thead>

                    <th>开通服务</th>
                    <th>产品名</th>
                    <th>手续费</th>

                </thead>
                <tbody>
                    <tr id="" name="dataTr" id="">
                        <td><input type="checkbox" name="27accf5b5cc7423ba01977425dd3c43d" checked></td>
                        <td>
                            微信支付
                            <input type="hidden" name="id" id="id" value="27accf5b5cc7423ba01977425dd3c43d">
                            <input type="hidden" name="productName" id="productName" value="微信支付">
                            <input type="hidden" name="productCode" id="productCode" value="XYF501">
                        </td>

                        <td><span class="necessary"></span>费率: <input type="text" name="feeRate" id="feeRate" value='3.0'>
                            ‰ &nbsp;&nbsp;&nbsp;
                            保底: <input type="text" name="minimumCost" id="minimumCost" value='1'>
                            (元) &nbsp;&nbsp;&nbsp;
                            封顶: <input type="text" name="cappingCost" id="cappingCost" value='1'>
                            (元)
                        </td>
                    </tr>
                    <tr id="alipayTr" name="dataTr">
                        <td><input type="checkbox" name="" id="alipay"></td>
                        <td>
                            支付宝支付
                            <input type="hidden" name="id" id="id" value="">
                            <input type="hidden" name="productName" id="productName" value="支付宝支付">
                            <input type="hidden" name="productCode" id="productCode" value="XYF511">
                        </td>

                        <td><span class="necessary"></span>费率: <input type="text" name="feeRate" id="feeRate" value='1'>
                            ‰ &nbsp;&nbsp;&nbsp;
                            保底: <input type="text" name="minimumCost" id="minimumCost" value='2'>
                            (元) &nbsp;&nbsp;&nbsp;
                            封顶: <input type="text" name="cappingCost" id="cappingCost" value='3'>
                            (元)
                        </td>

                    </tr>
                    <tr id="" name="dataTr">
                        <td><input type="checkbox" name=""></td>
                        <td>
                            银联扫码支付-信用卡
                            <input type="hidden" name="id" id="id" value="">
                            <input type="hidden" name="productName" id="productName" value="银联扫码支付-信用卡">
                            <input type="hidden" name="productCode" id="productCode" value="XYF551-CREDIT">
                        </td>

                        <td><span class="necessary"></span>费率: <input type="text" name="feeRate" id="feeRate" value='4'>
                            ‰ &nbsp;&nbsp;&nbsp;
                            保底: <input type="text" name="minimumCost" id="minimumCost" value='5'>
                            (元) &nbsp;&nbsp;&nbsp;
                            封顶: <input type="text" name="cappingCost" id="cappingCost" value='8'>
                            (元)
                        </td>

                    </tr>
                    <tr id="" name="dataTr">
                        <td><input type="checkbox" name=""></td>
                        <td>
                            银联扫码支付-借记卡
                            <input type="hidden" name="id" id="id" value="">
                            <input type="hidden" name="productName" id="productName" value="银联扫码支付-借记卡">
                            <input type="hidden" name="productCode" id="productCode" value="XYF551-DEBIT">
                        </td>

                        <td><span class="necessary"></span>费率: <input type="text" name="feeRate" id="feeRate" value='1'>
                            ‰ &nbsp;&nbsp;&nbsp;
                            保底: <input type="text" name="minimumCost" id="minimumCost" value='3'>
                            (元) &nbsp;&nbsp;&nbsp;
                            封顶: <input type="text" name="cappingCost" id="cappingCost" value='4'>
                            (元)
                        </td>

                    </tr>
                </tbody>
            </table>
            <input type="button" id="tableSubmit" value="提交" class="layui-btn">

        </form>
        <script>
            
            /* -----------------------------------------------------
                第一个问题: 隔行变色
                第二个问题: 把勾选的列表数据读出来
                第三个问题: 不勾选则设置为disabled, 勾选则可用
                第四个问题: 提交则把勾选的数据转成json   
            ----------------------------------------------------------*/
            //--隔行变色
            $("table.layui-table>tbody>tr:odd").css('background-color', '#CCCCCC');
            
            
            
            
            //只获取勾选的checkbox jQuery对象
            console.log($("tbody >tr input:checked")  );
            console.log($("tbody >tr input:checked").attr("checked")   );
            console.log($("tbody >tr input:checked").attr("name")   );
            
            //只获取勾选的checkbox jQuery对象的父元素
            console.log($("tbody >tr input:checked").parent()  );
            
            //只获取勾选的checkbox jQuery对象的父元素的父元素
            console.log($("tbody >tr input:checked").parent().parent()  );
            console.log($('tr').has('input:checked'));
            $('tr').has('input:checked').css('background-color', 'white');
            
            
            
        </script>
        
        
    </body>
</html>
